<script lang="ts" setup>
import { SwitchingTime } from '@/utils/tools'
import { inject, ref, computed, onMounted } from 'vue'
import { PageSkip } from '@/utils/tools'

const query = defineProps<{
  couponItem: any
  parm?: string
}>()

const emit = defineEmits<{
  // 调用父组件的事件进行传值，对比修改选中的值
  (event: 'editSelections', item: any): void
  (event: 'openPopup', item: any): void
}>()
const skip_back = () => {
  if (query.parm !== 'CanBeUsed') return
  emit('editSelections', query.couponItem)
}
/**动态计算 优惠券是否是当天 */
const dueToday = computed(() => {
  const currentDate = new Date().getTime()
  const isCorrectStatus = query.parm === 'NotStart' || query.parm === 'CanBeUsed'
  const validEndTime = new Date(query.couponItem.validEndTime).getTime()
  const isSameDay = SwitchingTime(currentDate, 'YMD') === SwitchingTime(validEndTime, 'YMD')
  return isCorrectStatus && isSameDay
})

const toUse = (i: any) => {
  if (i.type === 6) {
    // 去核销
    emit('openPopup', i)
  } else {
    PageSkip('/pages/eat/eat', 'switchTab')
  }
}

const { valueTransfer }: any = inject('popupObj')
/** 传入值返回优惠券规则 */
const convertText = (item: any) => {
  if (item.threshold) {
    return `满${item.threshold}元可用`
  } else if (!item.threshold && item.discountsType === 2) {
    return `无门槛`
  } else {
    return `无门槛立减`
  }
}
</script>
<template>
  <view
    class="couponItem"
    @tap.once="skip_back()"
    :class="{
      unusable: query.parm === 'CantUsed',
      expired: query.parm === 'Expired',
      failure: query.parm === 'Used',
    }"
  >
    <view class="couponItem_left">
      <view
        class="couponItem_top_bright"
        v-if="query.couponItem?.type !== 5 && query.couponItem?.type !== 6"
      >
        <text class="couponItem_top_bright_price" v-if="couponItem.discountsType === 1"
          >{{ '￥'
          }}<text class="couponItem_top_bright_price_data">{{
            query.couponItem.discounts
          }}</text></text
        >
        <text class="couponItem_top_bright_price" v-else>
          <text class="couponItem_top_bright_price_data">{{ query.couponItem.discounts }}</text
          >{{ '折' }}</text
        >
        <text class="couponItem_top_bright_min">{{ convertText(query.couponItem) }}</text>
      </view>
      <view v-else-if="query.couponItem?.type === 5" class="couponItem_top_bright freeOfCharge"
        >免单</view
      >
      <view v-else-if="query.couponItem?.type === 6" class="couponItem_top_bright freeOfCharge"
        >实物</view
      ></view
    >
    <view class="couponItem_right">
      <view class="couponItem_top">
        <view class="couponItem_top_rule">
          <text class="couponItem_top_rule_text">{{ query.couponItem.couponName }}</text>
          <view class="couponType">{{
            query.couponItem?.type === 1
              ? '满减券'
              : query.couponItem?.type === 2
              ? '折扣券'
              : query.couponItem?.type === 3
              ? '单品券'
              : query.couponItem?.type === 4
              ? '新人券'
              : query.couponItem?.type === 5
              ? '霸王免单券'
              : '实物券'
          }}</view>
          <!-- <text
          class="couponItem_top_rule_date _red"
          v-if="dueToday && (query.parm === 'NotStart' || query.parm === 'CanBeUsed')"
          >今日{{ SwitchingTime(query.couponItem.validEndTime, 'HMS') }}到期
        </text>

        <text class="couponItem_top_rule_date" v-else
          >有效期至{{ SwitchingTime(query.couponItem.validEndTime, '!s') }}
        </text> -->
        </view>
        <!-- <image
        v-else-if="query.couponItem?.type === 6"
        class="physicalPng"
        src="/static/images/Group_53401.png"
        mode="scaleToFill"
      /> -->
      </view>
      <view class="couponItem_button">
        <view class="couponItem_button_use" @tap.stop="valueTransfer(query.couponItem)"
          >使用规则 <text class="iconfont icon_questionMark"></text>
        </view>
        <!-- v-if="query.parm === 'NotStart'" 用来判断 去使用 按钮是否展示 -->
        <view
          v-if="query.parm === 'NotStart'"
          @tap.stop="toUse(query.couponItem)"
          hover-class="view-hover"
          class="couponItem_button_goToUse"
          :style="{ backgroundColor: query.couponItem?.type === 6 && '#FFB52C' }"
          >{{ query.couponItem?.type === 6 ? '去核销' : '去使用' }}</view
        >
      </view>
    </view>
    <!-- 选中的icon 图标 -->
    <view
      v-if="query.parm === 'CanBeUsed'"
      class="couponItem_iconfont iconfont"
      :class="query.couponItem.isSelected ? 'icon-checked' : 'icon_weixuanzhong'"
    ></view>
    <!-- 已过期水印 -->
    <view class="wodekaquan"></view>
    <view class="failureImg"> </view>
  </view>
</template>

<style lang="scss">
// 优惠券组件css
.couponItem {
  position: relative;
  margin: 20rpx 30rpx;
  width: 690rpx;
  height: 200rpx;
  font-size: 24rpx;
  color: $uni-text-color-grey;
  background-color: #fff;
  border-radius: 16rpx;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  .couponItem_left {
    position: relative;
    width: 220rpx;
    height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('/static/images/couponBg.png') no-repeat;
    background-size: cover;
    .couponItem_top_bright {
      position: absolute;
      display: flex;
      flex-direction: column;
      color: #fff;
      .couponItem_top_bright_price {
        display: flex;
        justify-content: center;
        .couponItem_top_bright_price_data {
          font-size: 60rpx;
        }
      }
      .couponItem_top_bright_min {
        text-align: center;
      }
      z-index: 9;
    }
    .freeOfCharge {
      width: 100rpx;
      text-align: center;
      font-size: 40rpx;
    }
    .couponBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 220rpx;
      height: 200rpx;
      z-index: 8;
    }
  }
  .couponItem_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 26rpx 30rpx 20rpx;
  }

  .couponItem_iconfont {
    position: absolute;
    font-size: 28rpx;
    top: 16rpx;
    right: 16rpx;
  }
  .icon-checked {
    color: $uni-color-motif;
  }
  .couponItem_top {
    position: relative;
    display: flex;
    justify-content: space-between;
    .couponItem_top_rule {
      display: flex;
      flex-direction: column;
      .couponItem_top_rule_text {
        font-size: 32rpx;
        color: #000;
        margin-bottom: 16rpx;
        max-width: 480rpx;
        font-weight: bold;
      }
      .couponItem_top_rule_date {
        display: flex;
      }
      ._red {
        color: #ff4e21;
      }
      .couponType {
        height: 36rpx;
        line-height: 36rpx;
        font-size: 24rpx;
        color: #b2b2b2;
      }
    }
  }
  .couponItem_button {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: $uni-color-motif;
    font-size: 24rpx;
    .don_t {
      color: #000000e5;
    }
    .iconfont {
      font-size: 24rpx;
    }
    .couponItem_button_goToUse {
      padding: 0 28rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      border-radius: 30rpx 30rpx 30rpx 30rpx;
      color: #fff;
      background-color: $uni-color-motif;
      font-size: 26rpx;
      box-shadow: 0rpx 2rpx 10rpx 2rpx rgba(253, 203, 74, 0.6);
    }
  }
  .physical {
    color: #ad7612;
    background: linear-gradient(90deg, rgba(255, 181, 44, 0.6) 0%, rgba(255, 181, 44, 0) 100%);
  }
}

// 已失效
.failure,
// 已过期
.expired,
// 不可使用
.unusable {
  // filter: grayscale(100%);
  .couponItem_top_bright_price,
  .couponItem_top_bright_price_data,
  .couponItem_top_bright_min {
    color: #fff;
  }
  .freeOfCharge {
    color: #fff !important;
  }
}

.failure {
  // filter: grayscale(100%);
  .failureImg {
    position: absolute;
    right: 20rpx;
    bottom: 40rpx;
    background: url('/static/images/failure.png');
    background-size: cover; /* 设置背景图大小适应容器 */
    background-position: center; /* 设置背景图位置居中 */
    width: 120rpx;
    height: 120rpx;
    z-index: 999;
  }
}
.expired {
  .wodekaquan {
    position: absolute;
    right: 20rpx;
    bottom: 40rpx;
    background: url('/static/images/watermark.png');
    background-size: cover; /* 设置背景图大小适应容器 */
    background-position: center; /* 设置背景图位置居中 */
    width: 120rpx;
    height: 120rpx;
    z-index: 999;
  }
}
</style>
